// 导入变量文件
@import './variables.less';

// 重置样式
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  color: @text-primary;
  background-color: @bg-color;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  width: 100%;
  height: 100%;
}

// 滚动条样式
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: @scrollbar-track;
}

::-webkit-scrollbar-thumb {
  background: @scrollbar-thumb;
  border-radius: 4px;
  &:hover {
    background: @scrollbar-thumb-hover;
  }
}

// 通用样式
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.mt-10 {
  margin-top: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-20 {
  margin-bottom: 20px;
}

.ml-10 {
  margin-left: 10px;
}

.mr-10 {
  margin-right: 10px;
}

// 按钮样式覆盖
.el-button {
  &.primary {
    background-color: @primary-color;
    border-color: @primary-color;
  }
  &.success {
    background-color: @success-color;
    border-color: @success-color;
  }
  &.warning {
    background-color: @warning-color;
    border-color: @warning-color;
  }
  &.danger {
    background-color: @danger-color;
    border-color: @danger-color;
  }
}

// 表格样式覆盖
.el-table {
  .el-table__header {
    th {
      background-color: @table-header-bg;
      font-weight: 600;
    }
  }
  .el-table__row {
    &:hover {
      background-color: @table-row-hover;
    }
    &.current-row {
      background-color: @table-row-current;
    }
  }
}

// 卡片样式覆盖
.el-card {
  border-radius: @border-radius;
  .el-card__header {
    padding: 20px;
    border-bottom: 1px solid @border-color;
    background-color: @card-header-bg;
  }
  .el-card__body {
    padding: 20px;
  }
}